<style>
	/*vip-auth*/
	.vip-auth { width: 100%; height: 100%; -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); background: rgba(255, 255, 255, 0.2); position: fixed; left: 0; top: 0; z-index: 89; }
	.vip-auth_wrap { padding-top: 40rpx; width: 620rpx; background-color: #fff; border-radius: 20rpx; position: absolute; left: 50%; top: 50%; margin: -360rpx 0 0 -310rpx; }
	.vip-auth_wrap .icon { margin: 0 auto; width: 280rpx; height: 280rpx; }
	.vip-auth_wrap .desc { text-align: center; }
	.vip-auth_wrap .desc .span { line-height: 60rpx; color: #333; font-size: 36rpx; font-weight: 700; }
	.vip-auth_wrap .desc .p { padding: 20rpx 0; color: #929292; font-size: 32rpx; }
	.vip-auth_wrap .btn { padding: 60rpx 40rpx; }
	.vip-auth_wrap .btn ._btn { width: 100%; height: 92rpx; line-height: 92rpx; text-align: center; color: #fff; font-size: 32rpx; border-radius: 92rpx; }
</style>

<template>
	<view>
		<view v-if="visible" class="vip-auth">
			<view class="vip-auth_wrap">
				<view class="icon">
					<image class="image" src="/static/image/vip-auth.png"></image>
				</view>
				<view class="desc">
					<view class="span">开通会员VIP</view>
					<view class="p">{{content}}</view>
				</view>
				<view class="btn">
					<view class="flex2">
						<view class="flex-1 _btn" style="background-color: #ccc;" @click="goBack">以后再说</view>
						<view class="flex-0" style="width: 40rpx;"></view>
						<view class="flex-1 _btn linear" @click="$common.goPage('/pages/my/buyVip')">立即开通</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				needBack: false,
				content: '开通VIP后才能查看哦！',
			};
		},
		created() {

		},
		methods: {
			init(data) {
				this.visible = true
				if (data.needBack) {
					this.needBack = data.needBack
				}
				if (data.content) {
					this.content = data.content
				}
			},
			goBack() {
				this.visible = false
				if (this.needBack) {
					uni.navigateBack()
				}
			},
		}
	}
</script>
